<template>
  <view class="container">
    <!-- 患者信息 -->
    <view class="patient-section">
      <van-cell-group>
        <van-cell title="患者信息" :border="false" />
        <van-field
          v-model="patientInfo.name"
          label="姓名"
          placeholder="请输入患者姓名"
          required
        />
        <van-field
          v-model="patientInfo.age"
          label="年龄"
          placeholder="请输入年龄"
          type="number"
          required
        />
        <van-cell title="性别" :border="false">
          <template #default>
            <van-radio-group v-model="patientInfo.gender" direction="horizontal">
              <van-radio name="male">男</van-radio>
              <van-radio name="female">女</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <van-field
          v-model="patientInfo.phone"
          label="联系电话"
          placeholder="请输入联系电话"
          type="tel"
          required
        />
      </van-cell-group>
    </view>

    <!-- 病情描述 -->
    <view class="condition-section">
      <van-cell-group>
        <van-cell title="病情描述" :border="false" />
        <van-field
          v-model="conditionInfo.symptoms"
          label="主要症状"
          type="textarea"
          :autosize="{ minHeight: 100 }"
          placeholder="请详细描述您的症状"
          required
        />
        <van-field
          v-model="conditionInfo.duration"
          label="持续时间"
          placeholder="如：3天、1周等"
          required
        />
        <van-cell title="既往病史" :border="false">
          <template #default>
            <van-checkbox-group v-model="conditionInfo.history">
              <van-checkbox name="hypertension">高血压</van-checkbox>
              <van-checkbox name="diabetes">糖尿病</van-checkbox>
              <van-checkbox name="heart">心脏病</van-checkbox>
              <van-checkbox name="none">无</van-checkbox>
            </van-checkbox-group>
          </template>
        </van-cell>
      </van-cell-group>
    </view>

    <!-- 上传图片 -->
    <view class="upload-section">
      <van-cell-group>
        <van-cell title="上传相关图片（可选）" :border="false" />
        <van-uploader
          v-model="fileList"
          :max-count="3"
          :after-read="afterRead"
        />
      </van-cell-group>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-action">
      <van-button
        type="primary"
        size="large"
        @click="startConsultation"
        :loading="loading"
      >
        开始问诊
      </van-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const loading = ref(false);
const fileList = ref([]);

const patientInfo = reactive({
  name: "",
  age: "",
  gender: "male",
  phone: ""
});

const conditionInfo = reactive({
  symptoms: "",
  duration: "",
  history: []
});

const afterRead = (file: any) => {
  console.log("上传文件:", file);
};

const validateForm = () => {
  if (!patientInfo.name) {
    uni.showToast({ title: "请输入患者姓名", icon: "none" });
    return false;
  }
  if (!patientInfo.age) {
    uni.showToast({ title: "请输入年龄", icon: "none" });
    return false;
  }
  if (!patientInfo.phone) {
    uni.showToast({ title: "请输入联系电话", icon: "none" });
    return false;
  }
  if (!/^1[3-9]\d{9}$/.test(patientInfo.phone)) {
    uni.showToast({ title: "电话号码格式错误", icon: "none" });
    return false;
  }
  if (!conditionInfo.symptoms) {
    uni.showToast({ title: "请描述主要症状", icon: "none" });
    return false;
  }
  if (!conditionInfo.duration) {
    uni.showToast({ title: "请输入持续时间", icon: "none" });
    return false;
  }
  return true;
};

const startConsultation = () => {
  if (!validateForm()) {
    return;
  }

  loading.value = true;

  setTimeout(() => {
    loading.value = false;
    uni.navigateTo({
      url: "/pages/online-consultation/chat"
    });
  }, 1000);
};

onLoad(() => {
  console.log("线上问诊信息填写页面 onLoad");
});
</script>

<style lang="scss">
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.patient-section,
.condition-section,
.upload-section {
  background: white;
  margin-bottom: 16rpx;
}

.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx;
  background: white;
  z-index: 100;
}
</style>